<template>
  <div>
    <h4 class="font-weight-bold py-3 mb-4">
      <span class="text-muted font-weight-light">Charts /</span> Vue Echarts
    </h4>

    <hr class="border-light container-m--x mt-0 mb-5">

    <div class="demo-vertical-spacing">
      <div id="echartContainer" style="width:800px; height:500px"></div>
    </div>

  </div>
</template>

<style>
.echarts {
  height: 300px !important;
  width: 100% !important;
}
</style>

<script>
// import ECharts from 'vue-echarts/components/ECharts.vue'

// import 'echarts/lib/chart/line'
// import 'echarts/lib/chart/bar'
// import 'echarts/lib/chart/pie'
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/legend'

let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/heatmap");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/toolbox");
require("echarts/lib/component/legend");
require("echarts/lib/component/markLine");

function getVirtulData(year) {
  year = year || "2017";
  var date = +echarts.number.parseDate(year + "-01-01");
  var end = +echarts.number.parseDate(+year + 1 + "-01-01");
  var dayTime = 3600 * 24 * 1000;
  var data = [];
  for (var time = date; time < end; time += dayTime) {
    data.push([
      echarts.format.formatTime("yyyy-MM-dd", time),
      Math.floor(Math.random() * 1000)
    ]);
  }
  return data;
}

export default {
  name: "charts-vue-echarts",
  metaInfo: {
    title: "Vue Echarts - Charts"
  },
  components: {},
  data: () => ({}),
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echartContainer"));
    //console.log("ddddddd");
    // 绘制图表
    myChart.setOption({
      title: {
        top: 5,
        left: "left", //'center',
        text: "2011-2013年微博发布情况"
        // 老树微博，三千诗与画
        // https://zhuanlan.zhihu.com/p/28989690
      },
      tooltip: {
        position: "top"
      },
      visualMap: {
        min: 0,
        max: 20,
        calculable: true,
        orient: "horizontal",
        left: "center",
        top: "top"
      },

      calendar: [
        {
          range: ["2011-01-01", "2011-12-31"], //'2011',
          cellSize: ["auto", 15],
          left: 70,
          right: 30
        },
        {
          top: 230,
          range: "2012",
          cellSize: ["auto", 15],
          left: 70,
          right: 30
        },
        {
          top: 400,
          range: "2013",
          cellSize: ["auto", 15],
          left: 70,
          right: 30
        }
      ],

      series: [
        {
          type: "heatmap",
          coordinateSystem: "calendar",
          calendarIndex: 0,
          data: getVirtulData(2011)
        },
        {
          type: "heatmap",
          coordinateSystem: "calendar",
          calendarIndex: 1,
          data: getVirtulData(2012)
        },
        {
          type: "heatmap",
          coordinateSystem: "calendar",
          calendarIndex: 2,
          data: getVirtulData(2013)
        }
      ]
    });
  }
};
</script>
